<template>
	<div class="store-box">
		<div class="store-top-bar">
			<div class="top-bar__left" @click.stop="toHome">返回主页</div>
			<div class="top-bar__right">
				<el-button @click="submit_click">保存</el-button>
				<!-- 暂不用 -->
				<!-- <el-button color="#409eff" style="color: white">发布</el-button> -->
			</div>
		</div>
		<div class="letf-sub-bar">
			<div class="sub-bar__item" v-for="(item, pindex) in data.bars" :key="pindex"
				@click.stop="handleSub(item, pindex)">
				<div :class="[cur == pindex ? 'bar-active' : '', 'sub-bar__tab']">
					<el-icon color="#969799" class="bar-icon">
						<caret-right />
					</el-icon>
					<span class="sub-bar__tab-name">{{ item.text }}</span>
				</div>
				<div class="sub-list">
					<el-collapse-transition>
						<div class="sub-list__view" v-show="item.is_select">
							<draggable class="sub-list__view" :list="item.listAll" data-box="left" item-key="type_name"
								:group="{ name: 'assembly', pull: 'clone', put: false }" :move="onLeftMove">
								<template #item="{ element }">
									<div class="sub-list__item" :data-id="element.id"
										:data-type_name="element.type_name">
										<i class="i-icon" :style="{ backgroundImage: element.img }"></i>
										<div class="sub-list__item-text">{{ element.text }}</div>
									</div>
								</template>
							</draggable>
						</div>
					</el-collapse-transition>
				</div>
			</div>
		</div>
		<!-- body -->
		<div class="store-body">
			<div class="store-body-page">
				<div v-for="(item, index) in data.setTypeArr" :key="index" class="store-body__option store-body__option"
					:class="index == data.setTypeIdx ? 'store-body__option-active' : ''"
					@click="data.setTypeIdx = index">
					<el-icon size="14px">
						<document v-if="index == 0" />
						<More v-if="index == 1" />
						<Setting v-if="index == 2" />
					</el-icon>
					<span>{{ item }}</span>
				</div>
			</div>
			<!-- body context -->
			<div class="store-body__cont">
				<div class="content" :style="{ background: data.pageData.style.background }">
					<!-- 顶部导航 -->
					<div :class="[data.setTypeIdx == 1 ? 'item-sel' : '', 'head-cont']" @click="data.setTypeIdx = 1">
						<custom-head :pageData="data.pageData" />
					</div>

					<draggable :list="data.pageData.body" class="content-deco" item-key="type_name" ghost-class="ghost"
						group="assembly" animation="200" @change="item_change"
						:style="{ paddingTop: data.pageData.navBar.hidden ? '64px' : '0' }">
						<template #item="{ element, index }">
							<div style="position: relative"
								:class="data.setTypeIdx == 2 && index == data.itemIdx ? 'item-sel' : ''"
								@click="item_click(index, element)">
								<div :style="{
		                                padding: `${element.rpxStyle['margin-top']}px ${element.rpxStyle['margin-left']}px ${element.rpxStyle['margin-bottom']}px ${element.rpxStyle['margin-left']}px`,
		                            }">
									<!-- 轮播图 -->
									<Swiper v-if="element.type_name == 'swiper'" :data="element"
										@change="changeSwiper" />
									<!-- 标题文本 -->
									<Title v-else-if="element.type_name == 'title'" :data="element" />
									<!-- 辅助分割 -->
									<AuxilDivision v-else-if="element.type_name == 'auxiliary_division'"
										:data="element" />
									<!-- 通知 -->
									<Notice v-else-if="element.type_name == 'notice'" :data="element" />
									<!-- 图片广告 -->
									<ImageAd v-else-if="element.type_name == 'img_ad'" :data="element" :index="index" />
									<!-- 图文导航 -->
									<Grid v-else-if="element.type_name == 'grid'" :data="element" />
									<!-- 线路列表 -->
									<Line v-else-if="element.type_name == 'line'" :data="element" />

									<!-- 容器 -->
									<!-- <ContainerBox v-else-if="element.type_name == 'box'" :data="element" /> -->
									<div v-else>{{ element }}</div>
								</div>
								<div class="tool-btn-con cls-center cls-column" v-if="index == data.itemIdx">
									<el-icon color="#979797" :size="20" @click="del_item(index)" title="删除">
										<Delete />
									</el-icon>
								</div>
							</div>
						</template>
					</draggable>
				</div>
				<!-- footer -->
				<div class="store-footer">
					<div class="copyright">
						<div class="ft-copyright" @click="toWebsite">
							<!-- <img
		                        :src="proxy.imgUrl + 'tenant_593be52a46f869eea8b31d146d21de7a/album/202306/20230619_47e6abe602c4dc646718fe78623a59f3.png'"
		                        alt="花数通"
		                    /> -->
							<p>花数通提供技术支持</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- right 组件设置 -->
		<div class="right-editor">
			<!-- 页面设置 -->
			<body-set v-if="data.setTypeIdx == 0" :pageData="data.pageData" />
			<!-- 顶部导航设置 -->
			<nav-bar-set v-else-if="data.setTypeIdx == 1" :pageData="data.pageData" />
			<!-- 标题文本 -->
			<set-title v-else-if="data.curItem.type_name == 'title'" :data="curItem" />
			<!-- 辅助分割 -->
			<set-aux-division v-else-if="curItem.type_name == 'auxiliary_division'" :data="curItem" />
			<!-- 轮播图设置 -->
			<swiper-set v-else-if="curItem.type_name == 'swiper'" :data="curItem" />
			<!-- 公告通知 -->
			<set-notice v-else-if="curItem.type_name == 'notice'" :data="curItem" />
			<!-- 图片广告 -->
			<set-image-ad v-else-if="curItem.type_name == 'img_ad'" :data="curItem" />
			<!-- 图文导航 -->
			<grid-set v-else-if="curItem.type_name == 'grid'" :data="curItem" />
			<!-- 路线 -->
			<line-set v-else-if="curItem.type_name == 'line'" :data="curItem" />

			<!-- 容器 -->
			<!-- <set-container v-else-if="curItem.type_name == 'box'" :data="curItem" /> -->
		</div>
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref,
		reactive,
		toRefs,
		onMounted,
		onBeforeUnmount
	} from "vue"
	import {
		BrushFilled,
		QuestionFilled,
		CaretRight,
		Document,
		Delete,
		More,
		Setting
	} from "@element-plus/icons-vue"
	import EventBus from "@common/event-bus" // EventBus事件总线，任意组件通信
	import {
		useRouter,
		useRoute
	} from "vue-router"
	import draggable from "vuedraggable"
	const router = useRouter()
	const route = useRoute()
	const {
		proxy
	} = getCurrentInstance()

	// 图标
	import i1 from "@images/i1.png" // 标题文本
	import i2 from "@images/i2.png" // 轮播图
	import i3 from "@images/i3.png" // 线路
	import i4 from "@images/i4.png" // 图片广告
	import i5 from "@images/i5.png" // 图文导航
	import i7 from "@images/i7.png" // 公告通知
	import i15 from "@images/i15.png" // 辅助分割


	// 组件
	import Title from "@components/design/title.vue"
	import CustomHead from "@components/design/custom-head.vue"
	import AuxilDivision from "@components/design/auxil-division.vue"
	import Swiper from "@components/design/swiper.vue"
	import Notice from "@components/design/notice.vue"
	import ImageAd from "@components/design/image-ad.vue"
	import Grid from "@components/design/grid.vue"
	import Line from "@components/design/line.vue"

	// 右侧组件设置
	import NavBarSet from "@components/rightSetup/set-navbar.vue"
	import BodySet from "@components/rightSetup/set-body.vue"
	import SetTitle from "@components/rightSetup/set-title.vue"
	import SetAuxDivision from "@components/rightSetup/set-aux-division.vue"
	import SwiperSet from "@components/rightSetup/set-swiper.vue"
	import SetNotice from "@components/rightSetup/set-notice.vue"
	import SetImageAd from "@components/rightSetup/set-image-ad.vue"
	import GridSet from "@components/rightSetup/set-grid.vue"
	import LineSet from "@components/rightSetup/set-line.vue"

	const data = reactive({
		bars: [{
			is_select: true,
			text: "基础组件",
			/** 可用组件 */
			lists: [],
			listAll: [{
				// 轮播图
				id: 2,
				img: "url(" + i2 + ")",
				type_name: "swiper",
				text: "轮播图",
				/** 需要x2转成rpx样式 */
				rpxStyle: {
					/**高度 */
					height: 240,
					"border-radius": 0,
					"margin-left": 0,
					"margin-right": 0,
					"margin-bottom": 0,
					"margin-top": 0,
				},
				style: {},
				data: {
					interval: 3000,
					/**请求地址*/
					reqUrl: "",
					/**请求参数*/
					reqData: {},
					/* 当没有请求地址的时候，使用data数据 */
					data: [],
				},
			}, {
				// 公告通知
				id: 6,
				img: "url(" + i7 + ")",
				type_name: "notice",
				text: "公告通知",
				/** 需要x2转成rpx样式 */
				rpxStyle: {
					"border-radius": 0,
					"margin-left": 0,
					"margin-right": 0,
					"margin-bottom": 0,
					"margin-top": 0,
				},
				style: {
					notice_type: 1, // 公告样式，1是纯文本，2是文章列表
					type: 1, // 公告左侧图标，1是标准，2是自定义图标
					arrow_switch: false, // 是否显示右侧箭头
					background: "#fffbe8", // 滚动条背景
					color: "#ed6a0c", // 文本颜色
				},
				data: {
					/**请求地址*/
					reqUrl: "",
					/**请求参数*/
					reqData: {},
					/* 当没有请求地址的时候，使用data数据 */
					data: "请填写内容，内容过长时，将会在手机上滚动显示",
					custom_icon: "", // 自定义图标
				},
			}, {
				// 图片广告
				id: 9,
				img: "url(" + i4 + ")",
				type_name: "img_ad",
				text: "图片广告",
				/** 需要x2转成rpx样式 */
				rpxStyle: {
					"margin-left": 0,
					"margin-right": 0,
					"margin-bottom": 0,
					"margin-top": 0,
					"border-radius": 5,
				},
				style: {
					type: 1, // 1是一行一个，2是一行两个，3是一行三个，4是一左二右
					showSpac: false, // 图片间距，默认false
					// img_height: 375, // 图片高度，仅适用于type为4的时候
				},
				data: {
					/**请求地址*/
					reqUrl: "",
					/**请求参数*/
					reqData: {},
					/* 当没有请求地址的时候，使用data数据 */
					data: [{
						name: "",
						url: "",
						page_id: "",
						pageTitle: "",
						flag: false
					}],
				},
			}, {
				// 图文导航
				id: 1,
				img: "url(" + i5 + ")",
				type_name: "grid",
				text: "图文导航",
				/** 需要x2转成rpx样式 */
				rpxStyle: {
					"margin-left": 0,
					"margin-right": 0,
					"margin-bottom": 0,
					"margin-top": 0,
					"padding-bottom": 0,
					"padding-top": 0,
					"padding-left": 0,
					"padding-right": 0,
					"img-size": 70,
					"border-radius": 0,
					"title-top": 0,
					"title-bottom": 0,
				},
				/**普通样式，可直接转字符串给前端使用 */
				style: {
					background: "#fff",
					color: "#333",
				},
				/**前端所需要的所有数据 */
				data: {
					/**可给前端使用的样式 */
					style: "",
					/** 外边框样式 */
					conStyle: "",
					/**请求地址*/
					reqUrl: "",
					/**请求参数*/
					reqData: {},
					/* 当没有请求地址的时候，使用data数据 */
					data: [{
							title: "导航1",
							url: "",
							page_id: "",
							pageTitle: ""
						},
						{
							title: "导航2",
							url: "",
							page_id: "",
							pageTitle: ""
						},
						{
							title: "导航3",
							url: "",
							page_id: "",
							pageTitle: ""
						},
						{
							title: "导航4",
							url: "",
							page_id: "",
							pageTitle: ""
						},
					],
				},
			}, {
				// 标题文本
				id: 12,
				img: "url(" + i1 + ")",
				type_name: "title",
				text: "标题文本",
				/** 需要x2转成rpx样式 */
				rpxStyle: {
					"margin-left": 0,
					"margin-right": 0,
					"margin-bottom": 0,
					"margin-top": 0,
					"border-radius": 0,
				},
				style: {
					title_color: "#333",
					weight: 500,
					background: "#fff",
					arrowSwitch: false, // 是否显示箭头
					showMore: false,
					showLeft: false, // 标题左边框
					left_bottom_color: "#333",
				},
				data: {
					/**请求地址*/
					reqUrl: "",
					/**请求参数*/
					reqData: {},
					title: "标题文本",
					jump_url: {
						pageTitle: "",
						page_id: "",
					},
					data: [],
				},
			}, {
				// 辅助分割
				id: 5,
				img: "url(" + i15 + ")",
				type_name: "auxiliary_division",
				text: "辅助分割",
				/** 需要x2转成rpx样式 */
				rpxStyle: {
					/**高度 */
					height: 40,
					"margin-left": 0,
					"margin-right": 0,
					"margin-bottom": 0,
					"margin-top": 0,
				},
				style: {
					background: "#fff",
				},
				data: {},
			},{
				// 线路列表
				id: 3,
				img: "url(" + i3 + ")",
				type_name: "line",
				text: "线路列表",
				/** 需要x2转成rpx样式 */
				rpxStyle: {
					"margin-left": 0,
					"margin-right": 0,
					"margin-bottom": 0,
					"margin-top": 0,
					"border-radius":0,
				},
				style: {
					background: "#fff",
				},
				data: {
					/**请求地址*/
					reqUrl: "",
					/**请求参数*/
					reqData: {},
					title: "线路",
					data: [],
				},
			}, ]
		}],
		pageData: {
			title: "花数通",
			share_name: "",
			share_cover: "", // 分享封面
			/**页面样式 */
			style: {
				background: "#f7f8fa",
			},
			navBar: {
				background: "#fff",
				color: "#000",
				hidden: false,
				search_switch: false,
				title: "花数通",
				swipes_color: "#ffffff",
			},
			body: [],
		},

		/**当前设置类型 */
		setTypeIdx: 0,
		setTypeArr: ["页面设置", "顶部导航", "组件管理"],
		itemIdx: -1, // 选中的组件索引
		curItem: {}, // 当前选中的组件
	})
	let decorate_id = 0
	let pageType=10
	onMounted(() => {
		decorate_id = route.query.sid || 0
		pageType=route.query.pageType || 10
		//获取详情
		if (decorate_id) {
			proxy.$axios
				.get("decorates/"+decorate_id+"/content")
				.then((res) => {
					// console.log("获取到的详情", res.data)
					if (res.data.code == 200) {
						let result = res.data.data.style
						let index = result.body.findIndex((item) => item.type_name === "swiper")
						if (index > -1) {
							let swipes = result.body[index].data.data
							if (swipes[0].color) {
								data.pageData.navBar.background = ""
								data.pageData.navBar.swipes_color = swipes[0].color
							}
						}
						data.pageData = result
					} else {
						proxy.$message({
							message: res.data.msg,
							type: "error"
						})
					}
				})
				.catch((err) => {})
		}

		//获取左边工具栏
		// proxy.$axios
		// 	.get("decorate/tool/index")
		// 	.then((res) => {
		// 		if (res.code) {
		// 			proxy.$message({
		// 				message: res.msg,
		// 				type: "warning"
		// 			})
		// 		} else {
		// 			let arr = []
		// 			let arrAll = []
		// 			data.bars[0].listAll.map((val) => {
		// 				arrAll.push(val.type_name)
		// 			})
		// 			res.data.data.map((val1) => {
		// 				let i = arrAll.indexOf(val1.title_value)
		// 				i > -1 && arr.push(data.bars[0].listAll[i])
		// 			})
		// 			data.bars[0].lists = arr
		// 		}
		// 	})
		// 	.catch((err) => {})
	})
	// 返回装修首页
	const toHome = () => {
		router.push("/Shop/page/pageList")
	}

	// 禁止左侧菜单相互移动
	// draggedContext: 被拖拽的元素
	//       index: 被拖拽的元素的序号
	//       element: 被拖拽的元素对应的对象
	//       futureIndex: 预期位置、目标位置
	// relatedContext: 将停靠的对象
	//       index: 目标停靠对象的序号
	//       element: 目标的元素对应的对象
	//       list:  目标数组
	//       component: 将停靠的vue组件对象
	const onLeftMove = (e) => {
		return JSON.stringify(data.pageData.body) == JSON.stringify(e.relatedContext.list)
	}

	/**
	 * 二级菜单
	 * @property {Number} cur 二级菜单数组下标
	 * @property {Function} handleSub 菜单点击事件
	 */
	const cur = ref(0)
	const handleSub = (item, index) => {
		cur.value = cur.value == index ? null : index
		item.is_select = !item.is_select
	}
	const item_change = (e) => {
		// console.log("组件拖动变化", e)
		// console.log("变化后的组件数据", data.pageData.body)
		let arr = (data.pageData.body = JSON.parse(JSON.stringify(data.pageData.body)))
		let obj = e.moved || e.added
		data.itemIdx = obj.newIndex
		data.curItem = arr[obj.newIndex]
		data.setTypeIdx = 2
	}
	/**选中要编辑的组件 */
	const item_click = (index, element) => {
		data.itemIdx = index
		data.curItem = element
		data.setTypeIdx = 2
	}

	/**
	 * 删除组件
	 * @param {int} index
	 */
	const del_item = (index) => {
		data.pageData.body.splice(index, 1)
		setTimeout(() => {
			data.curItem = data.pageData.body[data.itemIdx] || {}
		}, 100)
	}

	// 获取轮播图索引
	const changeSwiper = (cur) => {
		let itemArr = data.pageData.body
		let index = itemArr.findIndex((item) => item.type_name === "swiper")
		if (index > -1) {
			let swipes = itemArr[index].data.data
			if (swipes[cur].color) {
				data.pageData.navBar.background = ""
				data.pageData.navBar.swipes_color = swipes[cur].color
			}
		}
	}

	const {
		bars,
		pageData,
		curItem
	} = toRefs(data)


	/**保存页面 */
	const submit_click = () => {
		// 转换样式给前端使用
		data.pageData.body.map((val) => {
			let style = ""
			for (let key in val.rpxStyle) {
				style += key + ":" + val.rpxStyle[key] * 2 + "rpx;"
			}
			for (let key in val.style) {
				style += key + ":" + val.style[key] + ";"
			}
			val.data.style = style
		})
		// console.log("提交的数据", data.pageData)
		// let urls = decorate_id == 0 ? "decorates" : "decorates/{sid}"
		let title = data.pageData.navBar.title ? proxy.$util.replaceStr(data.pageData.navBar.title) : "首页"
		let datas = {
			title,
			content: JSON.stringify(data.pageData),
			type: pageType
		}
		console.log("提交的页面数据", datas)
		if (decorate_id == 0) {
			proxy.$axios
				.post("decorates", datas)
				.then((res) => {
					if (res.data.code == 200) {
						proxy.$message({
							message: "保存成功",
							type: "success"
						})
						router.back(-1)
					} else {
						proxy.$message({
							message: res.data.msg,
							type: "error"
						})
					}
				})
				.catch((err) => {})
		} else {
			proxy.$axios
				.put("decorates/" + decorate_id, datas)
				.then((res) => {
					if (res.data.code == 200) {
						proxy.$message({
							message: "保存成功",
							type: "success"
						})
						router.back(-1)
					} else {
						proxy.$message({
							message: res.data.msg,
							type: "error"
						})
					}
				})
				.catch((err) => {})
		}
		// decorate_id > 0 && (datas.decorate_id = decorate_id)
		// proxy.$axios
		//     .post(urls, datas)
		//     .then((res) => {
		//         if (res.data.code == 0) {
		//             proxy.$message({ message: "保存成功", type: "success" })
		//             decorate_id == 0 && router.back(-1)
		//         } else {
		//             proxy.$message({ message: res.data.msg, type: "error" })
		//         }
		//     })
		//     .catch((err) => {})
	}
</script>

<style lang="less" scoped>
	.preview-bg {
		height: 90px;
		// width: 228px;
		overflow: hidden;
		position: relative;

		.preview-item__title {
			font-size: 16px;
			position: absolute;
			top: 56px;
			left: 10px;
			display: flex;
			align-items: flex-end;
		}
	}

	.item-sel {
		&::before {
			content: "";
			position: absolute;
			width: 375px;
			height: 100%;
			left: 0px;
			top: 0;
			box-sizing: border-box;
			border: 2px solid #4b93fa;
			z-index: 110;
			cursor: move;
		}
	}

	.head-cont {
		&::before {
			height: 64px;
		}
	}

	.tool-btn-con {
		position: absolute;
		top: 0;
		right: -40px;
		width: 38px;
		background: #fff;
		box-shadow: 0 2px 8px 0 rgb(200 201 204 / 50%);
		border-radius: 2px;
		padding: 5px 0;

		.el-icon {
			cursor: pointer;

			&:hover {
				color: @themes;
			}
		}
	}

	.top-bar__left {
		cursor: pointer;
	}

	.ghost {
		width: 100% !important;
		border: 2px dashed #e6e8eb;
		border-radius: 2px;
	}

	.store-box {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #f9f9f9;
	}

	.store-top-bar {
		position: fixed;
		top: 0;
		height: 54px;
		width: 100%;
		border-bottom: 1px solid #ebedf0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
		padding: 0px 20px;
	}

	.left-bar {
		width: 75px;
		position: absolute;
		border-right: 1px solid #ebedf0;
		top: 55px;
		left: 0;
		bottom: 0;
		background-color: #fff;
	}

	.left-bar__one {
		cursor: pointer;
		text-align: center;
		margin: 32px auto 0;
	}

	.left-bar__active {
		color: #409eff;
		font-weight: 500;
	}

	.left-bar__help {
		position: absolute;
		bottom: 32px;
		left: 26px;
	}

	.letf-sub-bar {
		position: absolute;
		top: 56px;
		left: 76px;
		overflow-x: hidden;
		overflow-y: auto;
		bottom: 0;
		background: #fff;
		user-select: none;
		width: 200px;
	}

	.sub-bar__item {
		padding: 0px 12px;
	}

	.sub-bar__tab {
		margin-top: 22px;
		width: 100%;
		display: flex;
		align-items: center;
		height: 30px;
		position: relative;
		color: #555;
		cursor: pointer;
	}

	.sub-bar__tab-name {
		font-size: 14px;
		color: #333;
		margin-left: 8px;
	}

	.bar-icon {
		transition: transform 0.3s;
	}

	.bar-active .bar-icon {
		transform: rotateZ(90deg);
	}

	.sub-list {
		max-height: 2000px;
		margin: 0 auto;
		padding: 1px;
		width: 160px;
		overflow: hidden;
		transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	}

	.sub-list__view {
		display: flex;
		flex-flow: row wrap;
		width: 100%;
	}

	.sub-list__item {
		width: 50%;
		text-align: center;
		height: 80px;
		font-size: 12px;
		margin-bottom: 8px;
		border-radius: 2px;
		cursor: move;
	}

	.i-icon {
		display: inline-block;
		margin-top: 8px;
		background-position: 0 0;
		height: 32px;
		width: 32px;
		background-size: cover;
	}

	.sub-list__item-text {
		font-size: 12px;
		margin-top: 6px;
		color: #666;
	}

	.sub-list__item:hover {
		background: #409eff;
		color: #fff;
	}

	.sub-list__item:hover .i-icon {
		background-position: 0 32px;
	}

	.sub-list__item:hover .sub-list__item-text {
		color: #fff;
	}

	.store-body {
		position: absolute;
		top: 56px;
		left: 262px;
		right: 376px;
		bottom: 0;
		overflow-y: auto;
		overflow-x: hidden;
		background-color: #f7f8fa;
		user-select: none;
	}

	.store-body-page {
		position: fixed;
		top: 128px;
		right: 407px;
		text-align: center;
		font-size: 12px;
		color: #323233;
		z-index: 1;
	}

	.store-body__option {
		position: relative;
		background-color: #fff;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
		border-radius: 2px;
		width: 94px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12px;
		cursor: pointer;
	}

	.store-body__option span {
		margin-left: 4px;
	}

	.store-body__option-active {
		background-color: #409eff;
		color: #fff;
	}

	.right-editor {
		width: 376px;
		position: absolute;
		padding-bottom: 100px;
		top: 56px;
		right: 0;
		overflow-x: hidden;
		overflow-y: auto;
		bottom: 0;
		background: #fff;
		scrollbar-width: none;
		-ms-overflow-style: none;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.store-body__cont {
		width: 375px;
		transform: scale(1);
		margin: 70px auto;
	}

	.content {
		position: relative;
		width: 375px;
		margin: 0 auto;
		min-height: 604px;
		user-select: none;
		box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
	}

	.content-deco {
		position: relative;
		min-height: 540px;

		&::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			-ms-overflow-style: none;
		}
	}

	.store-footer {
		min-height: 1px;
		text-align: center;
		line-height: 16px;
		background-color: #f8f8f8;
		width: 375px;
		margin: 0 auto;
		box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
	}

	.copyright {
		background-color: #fff;
		position: relative;
		color: #999;
		text-align: center;
	}

	.ft-copyright {
		padding: 20px 16px 10px;
		text-align: center;
		cursor: pointer;
	}

	.ft-copyright img {
		width: 50px;
	}

	.ft-copyright p {
		font-size: 12px;
		color: #bfbfc3;
		padding: 6px 0px 10px;
	}

	/* 设置滚动条的样式 */
	::-webkit-scrollbar {
		width: 6px;
		height: 1px;
	}

	/* 滚动槽 */
	::-webkit-scrollbar-track {
		border-radius: 10px;
		background: #f1f1f1;
	}

	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: @gray-4;
	}
</style>